<template>
    <div class="text_list_box">
        <el-table
            ref="tableRef"
            :data="tableData"
            height="400"
            max-height="550"
            tooltip-effect="light"
            class="table_box"
            header-row-class-name="table_header_title">
            <el-table-column width="60px" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-checkbox v-model="scope.row.isCheck" @change="chooseMaterial(scope.row)"></el-checkbox>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="保存日期" align="center" width="180px">
                <template #default="scope">
                    <div class="line3">{{ scope.row.created_time || '--' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="标题" align="center" width="240px">
                <template #default="scope">
                    <div class="line3 title-text">{{ scope.row.draft_title || '--' }}</div>
                    <div v-if="scope.row?.article_detail?.length > 1 && scope.row?.unfold" class="draft_title">
                        <div v-for="ite in scope.row.article_detail" :key="ite.article_id" class="item">
                            <div class="img">
                                <img v-if="ite.cover" :src="ite.cover" alt="" />
                            </div>
                            <span class="title">{{ ite.title }}</span>
                        </div>
                    </div>
                    <div
                        v-else-if="
                            scope.row?.article_detail?.length == 1 ||
                            (scope.row?.article_detail?.length > 1 && !scope.row?.unfold)
                        "
                        class="draft_title">
                        <div class="item">
                            <div class="img">
                                <img
                                    v-if="scope.row.article_detail[0].cover"
                                    :src="scope.row.article_detail[0].cover"
                                    alt="" />
                            </div>
                            <span class="title">{{ scope.row.article_detail[0].title }}</span>
                        </div>
                    </div>
                    <div v-else>--</div>
                    <div
                        v-if="scope.row?.article_detail?.length > 1 && !scope.row?.unfold"
                        class="title-icon"
                        @click="scope.row.unfold = true">
                        <span>展开</span>
                        <el-icon>
                            <ArrowDown />
                        </el-icon>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="图文类型" align="center">
                <template #default="scope">
                    <div class="line3">{{ scope.row.type || '--' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="公众号" align="center" width="180px">
                <template #default="scope">
                    <div class="official">
                        <div class="img">
                            <img v-if="scope.row.official_cover" :src="scope.row.official_cover" alt="" />
                        </div>
                        <div class="name">{{ scope.row.official_name || '--' }}</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue';
import { ElMessage } from 'element-plus';
import lodash from 'lodash';

// const props = defineProps(["baseList"]);

interface PropsType {
    baseList?: any[];
    selectBaseList?: any[];
    remainNum?: string | number;
    multiple?: boolean;
    totalNum: number;
}
const props = withDefaults(defineProps<PropsType>(), {
    baseList: () => [],
    selectBaseList: () => [],
    remainNum: 0,
    multiple: true,
    totalNum: 9
});

const emit = defineEmits(['getData']);

const chooseMaterial = (item: any) => {
    const indx = props.selectBaseList.findIndex((it: any) => it.id === item.id);
    if (indx === -1) {
        if (props.remainNum <= 0) {
            ElMessage.error(`最多可选${props.totalNum}个素材`);
            item.isCheck = false;
            return;
        }
    }
    let deleteItem = null;

    /* eslint-disable */
    // if(props.multiple){     // 目前只支持单选
    if (false) {
        if (indx === -1) {
            item.isCheck = true;
            props.selectBaseList.push(lodash.cloneDeep(item));
        } else {
            deleteItem = item;
            props.selectBaseList.splice(indx, 1);
            item.isCheck = false;
        }
    } else {
        if (indx === -1) {
            props.baseList.forEach(ite => {
                ite.isCheck = false;
            });
            item.isCheck = true;
            props.selectBaseList.splice(0);
            props.selectBaseList.push(lodash.cloneDeep(item));
        } else {
            item.isCheck = false;
            props.selectBaseList.splice(0);
        }
    }
    if (props.selectBaseList?.length) {
        if (props.selectBaseList[0]?.article_detail?.length > props.totalNum) {
            props.selectBaseList[0].article_detail.splice(props.totalNum);
        }
    }
    /* eslint-enable */
    emit('getData', {
        deleteItem,
        id: '15',
        type: 10,
        typeStr: 'officialAccounts',
        data: props.selectBaseList
    });
};

const tableData = computed(() => {
    return props.baseList.map(item => {
        item.isCheck = false;
        return item;
    });
});
</script>

<style lang="scss" scoped>
.text_list_box {
    width: 100%;

    .line3 {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        word-break: break-all;
    }

    .title-text {
        text-align: left;
        font-size: 14px;
        color: #555;
        line-height: 1.6;
    }

    .draft_title {
        width: 100%;

        .item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 6px;

            &:last-of-type {
                border-bottom: none;
            }

            .img {
                width: 50px;
                height: 50px;
                border-radius: 8px;
                background-color: #f6f6f6;
                overflow: hidden;
                margin-right: 6px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .title {
                flex: 1;
                line-height: 1.6;
                font-size: 12px;
                color: #666;
                text-align: left;
            }
        }
    }

    .title-icon {
        display: flex;
        align-items: center;
        color: #ff6b00;
        margin-top: 6px;
        cursor: pointer;

        span {
            font-size: 12px;
        }
    }

    .official {
        width: 100%;
        display: flex;
        align-items: center;

        .img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #f6f6f6;
            margin-right: 6px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .name {
            flex: 1;
            line-height: 1.6;
            font-size: 13px;
            color: #555;
            text-align: left;
        }
    }
}
</style>
<style lang="scss">
.text_list_box {
    .el-table--scrollable-y ::-webkit-scrollbar {
        display: none;
    }

    .table_header_title {
        th.el-table__cell {
            background: #f9f9f9;
            padding: 10px 0;
        }
    }
}
</style>
